这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战。

直接进入本文正题，这篇文章利用javascript实现学生信息录入系统的特效，let us继续往下看吧。

实现设计好相关需要的区域，html布局如下：

1、学生信息录入相关标签区域，布局html代码如下：

2、已录入学生信息表格区域，布局html代码如下：

因为主要是为了练习一下javascript的代码，html布局的样式信息怎么方便怎么来，样式如下：

（1）学生信息录入相关标签区域的样式如下图：

（2）已录入学生信息表格区域的样式如下图：

（3）加完样式信息后的布局如下图：

1、获取相关标签对象。信息录入系统这个特效第一个部分是录入前信息的记录部分，这部分需要获取input输入框标签对象列表和信息提交按钮对象；第二部分是已录入学生信息的展示列表，这一部分就需要获取列表标签对象。获取标签对象代码如下：

2、为信息提交按钮设置点击响应事件。这个响应事件主要三步：（1）获取学生信息录入区域输入框的信息，将这些信息存储到数组中。（2）为录入的信息设置插入标签字符串，再将其插入到信息展示列表区域。（3）将学生信息录入区域输入框的信息设置到初始状态。

3、为已录入学生信息表格区域的删除单元格设置鼠标点击响应事件。当点击某一个单元格的删除标签对象时，通过设置的索引值查找数据，再将其删除。

至此，学生信息录入系统特效就完成啦！撒花，嘻嘻嘻★,°:.☆(￣▽￣)/$:   .°★ 。

B站视频网址：www.bilibili.com/video/BV1Uv…